<% question = form.object %>
<% is_expanded = question.errors.any? %>

<div class="card questionnaire-question" id="accordion-<%= id %>-field">
  <div data-controller="accordion">
    <div class="card-divider">
      <h2 class="card-title flex items-center">
        <span>
          <% if editable %>
            <%== icon("drag-move-2-fill") %>
          <% end %>
          <%= dynamic_title(translated_attribute(question.body), class: "question-title-statement", max_length: 50, omission: "...", placeholder: t(".title_and_description")) %>
        </span>
        <div class="ml-auto flex flex-row-reverse items-center gap-2">
          <button type="button" class="question--collapse" data-controls="panel-<%= id %>-question-card">
            <span class="icon-collapse">
              <%== icon("arrow-up-s-line", aria_label: t(".collapse"), role: "img") %>
            </span>

            <span class="icon-expand">
              <%== icon("arrow-down-s-line", aria_label: t(".expand"), role: "img") %>
            </span>
          </button>

          <% if editable %>
            <button class="button button__xs button__transparent button__transparent-secondary small alert remove-question button--title">
              <%= icon("delete-bin-line") %>
              <span class="hidden md:block"><%= t(".remove") %></span>
            </button>
          <% end %>
        </div>
      </h2>
    </div>

    <div id="panel-<%= id %>-question-card" class="card-section collapsible" aria-hidden="true">
      <div class="row column">
        <%=
          form.translated(
            :text_field,
            :body,
            tabs_id: id,
            label: t(".title"),
            disabled: !editable
          )
        %>
      </div>

      <div class="row column">
        <%=
          form.translated(
            :editor,
            :description,
            toolbar: :full,
            tabs_id: id,
            label: t(".description"),
            disabled: !editable
          )
        %>
      </div>

      <%=
        form.hidden_field(
          :question_type,
          value: :title_and_description
        )
      %>

      <% if question.persisted? %>
        <%= form.hidden_field :id, disabled: !editable %>
      <% end %>

      <%= form.hidden_field :position, value: question.position || 0, disabled: !editable %>
      <%= form.hidden_field :deleted, disabled: !editable %>
    </div>
  </div>
</div>
